<template>
  <view class="page">
    <!-- 标题栏 start -->
    <fu-custom :isBack="true" bgColor="bg-themes" class="header" :isBottom="true">
      <block slot="content">注销账号</block>
      <block slot="right">
      </block>
    </fu-custom>
    <view class="padding-lr">
      <scroll-view class="content" scroll-y="true" style="height: 1200rpx;">
        <jyf-parser :html="body"></jyf-parser>
      </scroll-view>


    </view>
    <view class="agreement margin-top">
      <image class="image" @click="handle_select" v-if="is_select_agree" src="../../static/select.png"></image>
      <image class="image" @click="handle_select" v-else src="../../static/icon-select-1.png"></image>
      <view><text>我已阅读并同意以上协议</text></view>
    </view>
    <view class="login-btn" @click="handleNext">
      填写注销申请
    </view>
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        body: '',
        is_select_agree: false
      }
    },
    onLoad() {

      this.getData()
    },
    methods: {
      getData() {
        this.$api.post(global.apiUrls.cancelAccountAgreement).then(res => {
          if (res.data.code == 1) {
            this.body = res.data.data.content
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            });
          }
        })
      },
      /**
   * @param 是否选择同意协议
   */
      handle_select() {
        this.is_select_agree = !this.is_select_agree
      },
      handleNext() {
        if (!this.is_select_agree) {
          uni.showToast({
            title: '请勾选同意协议后操作',
            icon: 'none'
          });
          return false;
        }
        uni.redirectTo({
          url:'/pages/index/setting/affirm-cancel-account/index'
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  page,.page{
	// min-height: 100vh;
    // height: 100%;
    // background: #ffffff;
    // display: flex;
    // flex-direction: column;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .content {
    min-height: 800rpx;
	// background: red;
  }

  .agreement {
    display: flex;
    width: 100%;
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #666666;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;

    .image {
      height: 28rpx;
      width: 28rpx;
      margin-right: 12rpx;
    }

    text {
      color: $theme;
    }
  }

  .login-btn {
    height: 88rpx;
    line-height: 88rpx;
    background: $bgtheme;
    opacity: 1;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    margin-bottom:64rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
  }
</style>
